import React from 'react';
import ThemeItem from './Item';
import {WeaSelect, WeaHelpfulTip} from 'ecCom';
import {Col, Row} from "antd";
import ColorPicker from 'rc-color-picker';
import {shadowOpts, visbleType, visibleOpts} from "../../../../../../constants/theme";

const borderOpts = [
  { key: '0', selected: false, showname: '无' },
  { key: '1', selected: false, showname: '1' },
  { key: '2', selected: false, showname: '2' },
  { key: '3', selected: false, showname: '3' },
  { key: '4', selected: false, showname: '4' },
  { key: '5', selected: false, showname: '5' }
  ];

  const mFullWidth = [
    { key: '0', selected: false, showname: '边缘缩进' },
    { key: '1', selected: false, showname: '全屏展示' }
    ];

export default class ThemeFormSetting extends React.Component {
  formatVisible = visible => {
    return visible == visbleType.Visble;
  }

  render() {
    const { onChange, data } = this.props;

    return (
      <div>
        <h4>表单窗口</h4>
        <ThemeItem label='底色'>
          <ColorPicker
            color={data.css.backgroundColor}
            onChange={onChange('form.css.backgroundColor')}
          />
        </ThemeItem>
        <ThemeItem label='手机宽度'>
          <Row style={{ padding: 0 }}>
            <Col span={12}>
              <WeaSelect
                value={data.mFullWidth ? '1' : '0'}
                options={mFullWidth}
                onChange={onChange('form.mFullWidth', this.formatVisible)}
              />
            </Col>
            <Col>
              <WeaHelpfulTip
                title={<div>仅用于手机浏览器</div>}
                placement="topRight"
                style={{paddingLeft: '5px'}}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem label='阴影'>
          <Row style={{ padding: 0 }}>
            <Col span={8}>
              <WeaSelect
                value={data.shadow ? '1' : '0'}
                options={shadowOpts}
                onChange={onChange('form.shadow', this.formatVisible)}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem label='边框'>
          <Row style={{ padding: 0 }}>
            <Col span={3}>
              <ColorPicker
                color={data.border.color}
                onChange={onChange('form.border.color')}
              />
            </Col>
            <Col span={7} offset={1}>
            <WeaSelect
            value={data.border.width}
            options={borderOpts}
            onChange={onChange('form.border.width')}
          />
            </Col>
          </Row>
        </ThemeItem>

        <ThemeItem label='分隔线'>
          <Row style={{ padding: 0 }}>
            <Col span={3}>
              <ColorPicker
                color={data.divider.color}
                onChange={onChange('form.divider.color')}
              />
            </Col>
            <Col span={7} offset={1}>
          <WeaSelect
            value={data.divider.visible ? '1' : '0'}
            options={visibleOpts}
            onChange={onChange('form.divider.visible', this.formatVisible)}
          />
            </Col>
          </Row>
        </ThemeItem>
      </div>
    )
  }
}